<template>
    <div v-if="show" class="emoji-picker">
        <div v-for="emoji in emojis" :key="emoji" @click="selectEmoji(emoji)">
            {{ emoji }}
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
// 声明组件接收的props，这里的show属性用于控制显示隐藏
const props = defineProps({
    show: Boolean
});
// 正确声明组件要触发的自定义事件，包括emoji-selected和update:show
const emit = defineEmits(['emoji-selected', 'update:show']);
const emojis = ['😍', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁'];
const selectEmoji = (emoji) => {
    emit('emoji-selected', emoji);
};
</script>

<style scoped>
.emoji-picker {
    position: absolute;
    width: 90%;
    height: 2rem;
    top: 4.3rem;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.04rem;
    padding: 0.04rem;
    display: flex;
    flex-wrap: wrap;
    overflow: scroll;
}

.emoji-picker div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.25rem;
    width: 20%;
    height: 0.5rem;
}
</style>
